<template>
  <div>
    显示消息：{{ mes }}
    <el-input v-model="sendsms"></el-input>
    <el-button @click="send">submit</el-button>
    <div class="table-box">
      <van-row class="th-row">
        <van-col
          :span="24 / dataList.title.length"
          v-for="warn in dataList.title"
          :key="warn"
        >
          {{ warn }}
        </van-col>
      </van-row>
      <van-row
        class="tb-row"
        v-for="(wb, index) in mes"
        :key="index"
        :style="{ background: wb.status == 1 ? '#fff' : '#FF0000' }"
      >
        <van-col
          :span="24 / Object.keys(wb).length"
          v-for="item in Object.keys(wb)"
          :key="item"
          >{{ wb[item] }}
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: {
        title: ["id", "名字", "最低温度", "最高温度", "状态","当前温度"],
      },
      mes: [],
      ws: "",
      sendsms: "",
      color: "red",
    };
  },
  methods: {
    initWeb() {
      this.ws = new WebSocket("ws://localhost:8000/ws?id=1");
      this.ws.onopen = function () {
        alert("success");
      };
      this.ws.onmessage = (data) => {
        this.mes = JSON.parse(data.data);
      };
      this.ws.onclose = function () {
        alert("close");
      };
    },
    send() {
      this.ws.send(this.sendsms);
    },
  },
  mounted() {
    this.initWeb();
  },
};
</script>

<style>
.table-box {
  margin: 12px 0px;
}
  .th-row {
    height: 56px;
    line-height: 56px;
    background: #ebf1f7;
    padding: 0px 12px;
  }
    .tb-row {
    height: 56px;
    line-height: 56px;
    padding: 0px 12px;
  }
</style>